<template>
  <el-container>
    <el-main style="padding: 0px;">
      <el-table :data="logList" style="height: 350px;" border stripe @filter-change="filterChange" @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="secretKey" label="密钥ID" width="150"/>
        <el-table-column prop="secretKeyType" label="密钥类型" width="100" show-overflow-tooltip
        column-key="secretKeyTypes"
        :filters="[
          { text: '黑锁', value: '0' },
          { text: '白锁', value: '1' }
        ]">
          <template #default="scope">
            <el-tag size="small" v-show="scope.row.secretKeyType == 0" type="success" effect="dark">黑锁</el-tag>
            <el-tag size="small" v-show="scope.row.secretKeyType == 1" type="info" effect="dark">白锁</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bindSecretKey" label="配对密钥" show-overflow-tooltip width="140"></el-table-column>
        <!-- <el-table-column prop="distributeStatus" label="分发状态">
          <template #default="scope">
            <el-tag size="small" v-show="scope.row.distributeStatus == 0" type="primary" effect="dark">未分发</el-tag>
            <el-tag size="small" v-show="scope.row.distributeStatus == 1" type="success" effect="dark">已分发</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="useStatus" label="使用状态" width="100"
        column-key="useStatus"
        :filters="[
          { text: '未使用', value: '0' },
          { text: '已使用', value: '1' }
        ]">
          <template #default="scope">
            <el-tag size="small" v-show="scope.row.useStatus == 0" type="primary" effect="dark">未使用</el-tag>
            <el-tag size="small" v-show="scope.row.useStatus == 1" type="success" effect="dark">已使用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseName" label="企业名称" width="180" show-overflow-tooltip/>
        <el-table-column prop="entUserName" label="企业成员" width="180" show-overflow-tooltip/>
        <el-table-column prop="agentName" label="代理商名称" width="180" show-overflow-tooltip/>
        <el-table-column prop="agentUserName" label="代理商成员" width="180" show-overflow-tooltip/>
        <el-table-column prop="buyTime" label="购买时间" width="150">
          <template #default="scope">
            {{ $filters.DateFilter(scope.row.buyTime, 'yyyy-MM-dd') }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" width="90px" label="操作">
          <!-- <template #header>
            <el-input @keyup.enter="getData()" v-model="searchData.keyWord" placeholder="关键字搜索" />
          </template> -->
          <template #default="scope">
            <el-button size="small" @click="getBack([scope.row.id])">归还</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="display: flex;align-items: center;">
      <el-button style="float:left;margin-top:6px;" type="primary" @click="getBackIds()">归还</el-button>
      <div style="flex: 1;height: 100%;"></div>
      <el-pagination
        v-model:currentPage="searchData.page"
        v-model:page-size="searchData.limit"
        :page-sizes="searchData.pageSizes"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchData.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top:4px;float:right;"
      />
    </el-footer>
  </el-container>
</template>

<script setup>
  import { ref, defineExpose, inject } from 'vue'
  const $utils = inject('$utils')
  const $filters = inject('$filters')

  const logList = ref([])
  const searchData = ref({
    page: 1,
    limit: 30,
    totalCount: 0,
    pageSizes: [30, 100, 200, 300, 400],
    secretKeyId: '',
    agentId: ''
  })
  const chooseTableData = ref([])


  function initData(id) {
    // 初始化数据
    console.log('id', id)
    searchData.value.enterpriseId = id
    fetchLogs()
  }
  // 多选数据
  function handleSelectionChange(val) {
    chooseTableData.value = val
  }
  // 标题头筛选
  function filterChange(filters) {
    var key = Object.keys(filters)[0]
    searchData.value[key] = filters[key]
    fetchLogs()
  }
  function fetchLogs() {
    $utils.post({
      url: '/api/SecretKeyInfo/GetKeyInfoByEntId',
      params: searchData.value,
      ok: function (data) {
        logList.value = data.data
        searchData.value.totalCount = data.count
      }
    })
  }
  function getBackIds() {
    var ids = []
    chooseTableData.value.forEach(item => {
      ids.push(item.id)
    })
    if (ids.length == 0) {
      $utils.$message({
        showClose: true,
        center: true,
        message: '请选择操作数据',
        type: 'warning'
      })
    } else {
      getBack(ids)
    }
  }

  function getBack(ids) {
    $utils.post({
      url: '/api/SecretKeyInfo/Restitution',
      params: {ids: ids},
      confirm: true,
      confirmText: '是否归还选中密钥？',
      confirmTitle: '提示',
      ok: function (data) {
        fetchLogs()
      }
    })
  }
  function handleSizeChange(val) {
    searchData.value.limit = val
    fetchLogs()
  }
  function handleCurrentChange(val) {
    searchData.value.page = val
    fetchLogs()
  }

  defineExpose({
    initData
  })


</script>

<style scoped>

</style>